<template>
  <div class="userInfo-wrap">
    <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />
    <div class="ye_wrap">
      <div class="ye_radius">
        <van-form @submit="onSubmit">
          <van-field v-model="username" label="手机号" placeholder="请输入手机号" name="username" readonly />
          <van-field v-model="niky" label="昵称" placeholder="请输入昵称" name="niky" />
          <van-field name="gender" label="性别">
            <template #input>
              <van-radio-group v-model="gender" direction="horizontal">
                <van-radio name="0">不公开</van-radio>
                <van-radio name="1">男</van-radio>
                <van-radio name="2">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <!-- 日期 -->
          <van-field
            readonly
            clickable
            name="birth"
            :value="birth"
            label="生日"
            placeholder="点击选择日期"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-datetime-picker
              v-model="currentDate"
              type="date"
              title="选择年月日"
              @confirm="confirmHandle"
              @cancel="showArea = false"
            />
          </van-popup>
          <!-- 地区 -->
          <van-field
            readonly
            clickable
            name="place"
            :value="place"
            label="地区"
            placeholder="点击选择省市区"
            @click="showArea = true"
          />
          <van-popup v-model="showArea" position="bottom">
            <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
          </van-popup>
          <van-field v-model="id" label="id" name="id" style="display:none" />
          <div style="margin: 16px;">
            <van-button block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import areaList from "assets/js/area.js";
import { getUserByUsername, editUser } from "@/api/user.js";

import Vue from "vue";
import { NavBar } from "vant";
import { Form } from "vant";
import { Field } from "vant";
import { RadioGroup, Radio } from "vant";
import { Picker } from "vant";
import { DatetimePicker } from "vant";
import { Popup } from "vant";
import { Area } from "vant";
import { Toast } from "vant";
import { Notify } from "vant";

Vue.use(Area);
Vue.use(Popup);
Vue.use(DatetimePicker);
Vue.use(Picker);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Field);
Vue.use(Form);
Vue.use(NavBar);
export default {
  data() {
    return {
      id: "",
      username: "",
      niky: "",
      gender: 0,
      birth: "",
      place: "",
      // placeCode: "",
      showArea: false,
      showPicker: false,
      currentDate: new Date(),
      areaList
    };
  },
  methods: {
    // 根据username查询
    async getData() {
      let un = localStorage.getItem("username");
      let rs = await getUserByUsername({ username: un });
      if (rs.status === 200) {
        (this.username = rs.data[0].username),
          (this.id = rs.data[0].id),
          (this.niky = rs.data[0].niky),
          (this.gender = rs.data[0].gender),
          (this.birth = rs.data[0].birth),
          (this.place = rs.data[0].place);
      } else {
        Toast.fail("请求失败请重试");
      }
      // console.log(rs);
    },
    // 提交修改
    async onSubmit(values) {
      let id = values.id;
      let rs = await editUser(values);
      if (rs.status === 200) {
        Notify({ type: "success", message: "修改个人信息成功" });
        this.$router.go(-1);
      }else{
        Notify({ type: 'danger', message: '修改失败请重试' });
      }
    },
    // 选择日期的确定
    confirmHandle(value) {
      // 格式化日期
      this.birth =
        value.getFullYear() +
        "-" +
        (value.getMonth() + 1) +
        "-" +
        value.getDate();
      this.showPicker = false;
    },
    // 选择地区的确定
    onConfirm(values) {
      console.log(values);
      this.place = values.map(item => item.name).join("/");
      this.placeCode = values[2].code;
      this.showArea = false;
    },
    // 返回上一页
    onClickLeft() {
      this.$router.go(-1);
    }
  },
  created() {
    this.getData();
  }
};
</script>

<style lang="stylus" scoped>
.userInfo-wrap {
  height: 100%;
  background-color: #f9f9f9;

  .van-nav-bar >>> .van-icon {
    color: #0f0f0f !important;
  }

  >>> .van-radio__icon--checked .van-icon {
    background-color: #c3a769;
    border-color: #c3a769;
  }

  >>> .van-button--info {
    background-color: #c3a769;
    border: none;
  }
}
</style>